<template>
	<div class="progressbar">
		<progress :percent='percent' activeColor='#EA5A49'></progress>
		<p>{{year}}已经过去了{{days}}天，{{percent}}%</p>
		<p>你读了多少本书了呢？</p>
	</div>
</template>

<script>
export default{
  methods: {
    isLeapYear () {
      const year = new Date().getFullYear()
      if (year % 400 === 0) {
        return true
      } else if (year % 4 === 0 && year % 100 !== 0) {
        return false
      }
    },
    getDayofYear () {
      return this.isLeapYear() ? 366 : 355
    }
  },
  computed: {
    year () {
      return new Date().getFullYear()
    },
    days () {
      let start = new Date()
      start.setMonth(0)
      start.setDate(1)
      // 今年第一天

      // 今天的时间戳减去今年第一天的时间戳
		    let offset = new Date().getTime() - start.getTime()
		    return parseInt(offset / 1000 / 60 / 60 / 24) + 1
    },
    percent () {
      return (this.days * 100 / this.getDayofYear()).toFixed(1)
    }
  }
}
</script>

<style lang="scss">
.progressbar {
	width: 100%;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 40px;
	progress {
		margin-bottom: 10px
	}
}
</style>